<template>
	<div>
		<!-- 选择器 -->
		<div class="mb-20px flex items-center">
			<div class="mr-20px">
				<p class="text-12px text-#86909C mb-10px">
					币对
				</p>
				<div class="w-140px">
					<el-select v-model="coinSelected" placeholder="请选择" popper-class="person-rec-spot-popper"
					suffix-icon="CaretBottom">
						<el-option label="全部" value="1"></el-option>
						<el-option label="BTC/USDT" value="2"></el-option>
						<el-option label="ETH/USDT" value="3"></el-option>
						<el-option label="JYD/USDT" value="4"></el-option>
						<el-option label="TRX/USDT" value="5"></el-option>
					</el-select>
				</div>
			</div>
			<div>
				<p class="text-12px text-#86909C mb-10px">
					方向
				</p>
				<div class="w-140px">
					<el-select v-model="toSelected" placeholder="请选择" popper-class="person-rec-spot-popper"
					suffix-icon="CaretBottom">
						<el-option label="全部" value="1"></el-option>
						<el-option label="买" value="2"></el-option>
						<el-option label="卖" value="3"></el-option>
					</el-select>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<TradeTable/>
	</div>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import TradeTable from '../tables/TradeTable.vue'
const coinSelected = ref<any>('1');
const toSelected = ref<any>('1');
</script>
<style lang="scss">
.person-rec-spot-popper{
	ul{
		padding:0;
		
	}
	.el-popper__arrow:before{
		display: none;
	} 
}	
</style>
